
@transition-1: toast-test;
// @transition-2: page-root;

//
.enter() {
    .overlay{
        opacity: 0.01;
    }
    .preloader-indicator-modal{
        opacity: 0.01;
        transform: translate(-40px, 0);
    }
    .modal{
        transform: translate3d(0,0,0) scale(1.185)
    }
}

.enter-active() {
    .overlay{
        opacity: 1;
        transition: opacity 250ms ease-in;
    }
    .preloader-indicator-modal{
        opacity: 1;
        transform: translate(0,0);
        transition: opacity 400ms ease-in, transform 400ms ease-in;
    }
    .modal{
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
        transition: opacity 250ms ease-in, transform 250ms ease-in;
    }
}

.leave() {
    .overlay{
        opacity: 1;
        .modal{
            opacity: 1;
            transform: translate3d(0,0,0) scale(1)
        }
    }
    .preloader-indicator-modal{
        opacity: 1;
        transform: translate(0,0);
    }
}

.leave-active() {
    .overlay{
        opacity: 0.01;
        transition: opacity 250ms ease-out;
    }
    .preloader-indicator-modal{
        opacity: 0.01;
        transform: translate(40px, 0);
        transition: opacity 250ms ease-out, transform 250ms ease-out;
    }

}

.@{transition-1} {
    &-enter{
        .enter;
        &.@{transition-1}-enter-active{
            .enter-active;
        }
    }
    &-leave{
        .leave;
        &.@{transition-1}-leave-active{
            .leave-active;
        }
    }
    // &-appear{
    //     .overlay{
    //         opacity: 0.01;
    //     }
    //     &.@{transition-1}-appear-active{
    //         .overlay{
    //             opacity: 1;
    //             transition: opacity 400ms ease-in;
    //         }
    //
    //     }
    // }
}

//
//
// .item-enter {
//     opacity: 0.01;
//     transform: translate(-40px, 0);
//     &.item-enter-active {
//         opacity: 1;
//         transform: translate(0,0);
//         transition: opacity 500ms ease-out, transform 500ms ease-out;
//     }
// }
//
// .item-leave {
//     opacity: 1;
//     transform: translate(0,0);
//     &.item-leave-active {
//         opacity: 0.01;
//         transform: translate(40px, 0);
//         transition: opacity 500ms ease-out, transform 500ms ease-out;
//     }
// }
//
// .item-appear {
//     opacity: 0.01;
//     transform: translate(-40px, 0);
//     &.item-appear-active {
//         opacity: 1;
//         transform: translate(0,0);
//         transition: opacity 500ms ease-out, transform 500ms ease-out;
//     }
// }


.toast-root{
    user-select:none;
}

.overlay{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    background:rgba(0,0,0,0.3);
}

.modal{
    position: fixed;
    margin-left: -140px;
    top:60px;
    left:50%;
    width: 280px;
    background:#fff;
    border-radius:12px;
    overflow: hidden;
    user-select: none;
    z-index:1100;
}

.modal-content-wrap{
    padding: 20px 15px;
}

.modal-title{
    font-size:14px;
    height:40px;
    user-select: none;
    text-align: center;
    line-height: 40px;
    font-weight: bold;

}
.modal-inner{
    font-size:14px;
    // padding: 20px 15px;
    line-height: 1.5;
    word-break: break-all;
    text-align: center;
    user-select: none;
    max-height:400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-button-wrap{
    width:100%;
    position:relative;
    &:before{
        content:'\20';
        border-top:1px solid #ccc;
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:0;
        transform:scaleY(0.5);
        transform-origin: center top;
    }
}

.modal-button{
    position: relative;
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    color:#056beb;
    &:before {
        content:'\20';
        border-top: 1px solid #ccc;
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        transform:scaleY(0.5);
        transform-origin: center top;
    }
    &:active{
        background: rgba(0, 0, 0, 0.05);
    }
    &.double{
        width: 50%;
        float:left;
        &:before{
            display: none;
        }
        &:after {
            content:'\20';
            border-right: 1px solid #ccc;
            display:block;
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            transform:scaleX(0.5);
            transform-origin: center right;
        }
        &:last-child{
            &:after{
                display: none;
            }
        }
    }
}

.notice{
    height:50px;
    padding:0 30px;
    background:rgba(0,0,0,.85);
    border-radius:8px;
    display:flex;
    color:#fff;
    align-items:center;
    justify-content:center;
}


//---------动画
.modal-enter {
  opacity: 0.01;
  transform: translate3d(0, 0, 0) scale(1.185);
}

.modal-enter.modal-enter-active {
  //top: 10em;
  transform: translate3d(0, 0, 0) scale(1.185);
  opacity: 1;
  transition: all 0.5s ease;
}

.modal-leave {
  opacity: 1;
}

.modal-leave.modal-leave-active {
  opacity: 0.01;
  transition: all .5s ease-in;
}

.modal-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.modal-appear.modal-appear-active {
  opacity: 1;
}


/* ============ Preloader ============ */
.preloader-indicator-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10600;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  visibility: visible;
  opacity: 0;
  background: none;
}

.preloader-indicator-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 13px;
  margin-left: -30px;
  margin-top: -30px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 11000;
  border-radius: 5px;
}
.preloader-indicator-modal .preloader {
  display: block;
  width: 34px;
  height: 34px;
}

.preloader {
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: preloader-spin 1s steps(12, end) infinite;
  animation: preloader-spin 1s steps(12, end) infinite;
}
.preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* ============ End Preloader ============ */
